import EChartsComponent from "../../../src/common/EChartsComponent"
import option from "./options"

import echarts from "echarts"
import { reduceConfig2 } from "@easyv/utils/lib/common/reduce-config"
import React, { useState, useEffect, useRef } from "react"

// import echartStyle from "./styles/echartStyle.css"

// export default class Circles extends EChartsComponent {
//     constructor(props) {
//         super(props);
//         this.setOption(option);
//     }
// }

export default function (props) {
  const { left, top, width, height, id, onRelative, data, configuration } = props

  // 自定义逻辑
  const styles = {
    position: "absolute",
    left,
    top,
    width,
    height,
    textAlign: "center",
  }

  //处理控件json
  const config = reduceConfig2(configuration)
  //   console.log(config)
  const [leftOpacity, setLeftOpacity] = useState(0.7)
  const [leftBottomOpacity, setLeftBottomOpacity] = useState(0.7)
  const [leftTopOpacity, setLeftTopOpacity] = useState(0.7)
  const [rightOpacity, setRightOpacity] = useState(0.7)
  const [rightBottomOpacity, setRightBottomOpacity] = useState(0.7)
  const [rightTopOpacity, setRightTopOpacity] = useState(0.7)
  const [topOpacity, setTopOpacity] = useState(0.7)
  const [num, setNum] = useState(0)

  //   useEffect(() => {
  //     // onRelative(id, { opacity })
  //     return
  //   }, [])

  const domEcharts = useRef()

  //   渐变
  const getMulticolor = val => {
    let multicolor = JSON.parse(JSON.stringify(val))
    for (let i = 0; i < multicolor.length; i++) {
      multicolor[i].offset = multicolor[i].offset / 100
    }
    return multicolor
  }
  // 复原
  const restoreColor = () => {
    option.series[0].data[0].itemStyle.normal.color.colorStops = getMulticolor(config.first.dataSeries.one.multicolorN.linear.stops)
    option.series[0].data[1].itemStyle.normal.color.colorStops = getMulticolor(config.first.dataSeries.two.multicolorN.linear.stops)
    option.series[1].data[0].itemStyle.normal.color.colorStops = getMulticolor(config.second.dataSeries.one.multicolorN.linear.stops)
    option.series[1].data[2].itemStyle.normal.color.colorStops = getMulticolor(config.second.dataSeries.two.multicolorN.linear.stops)
    option.series[2].data[0].itemStyle.normal.color.colorStops = getMulticolor(config.third.dataSeries.one.multicolorN.linear.stops)
    option.series[2].data[1].itemStyle.normal.color.colorStops = getMulticolor(config.third.dataSeries.two.multicolorN.linear.stops)
    option.series[2].data[2].itemStyle.normal.color.colorStops = getMulticolor(config.third.dataSeries.three.multicolorN.linear.stops)
    option.series[3].data[0].itemStyle.normal.color.colorStops = getMulticolor(config.third.dataSeries.one.multicolorN.linear.stops)
    option.series[3].data[1].itemStyle.normal.color.colorStops = getMulticolor(config.third.dataSeries.two.multicolorN.linear.stops)
    option.series[3].data[2].itemStyle.normal.color.colorStops = getMulticolor(config.third.dataSeries.three.multicolorN.linear.stops)
  }

  const handleClick = (e, value) => {
    var mychart = echarts.init(domEcharts.current)
    mychart.dispatchAction({
      type: "downplay",
    })
    setLeftOpacity(0.7)
    setLeftBottomOpacity(0.7)
    setLeftTopOpacity(0.7)
    setRightOpacity(0.7)
    setRightBottomOpacity(0.7)
    setRightTopOpacity(0.7)
    setTopOpacity(0.7)
    mychart.dispatchAction({
      type: "highlight",
      seriesIndex: value.seriesIndex,
      dataIndex: value.dataIndex,
    })
    switch (value.seriesIndex) {
      case 0:
        switch (value.dataIndex) {
          case 0:
            setRightBottomOpacity(1)
            restoreColor()
            option.series[0].data[0].itemStyle.normal.color.colorStops = getMulticolor(config.first.dataSeries.one.multicolorY.linear.stops)
            break
          case 1:
            setLeftBottomOpacity(1)
            restoreColor()
            option.series[0].data[1].itemStyle.normal.color.colorStops = getMulticolor(config.first.dataSeries.two.multicolorY.linear.stops)
            break
        }
        break
      case 1:
        switch (value.dataIndex) {
          case 0:
            setRightOpacity(1)
            restoreColor()
            option.series[1].data[0].itemStyle.normal.color.colorStops = getMulticolor(config.second.dataSeries.one.multicolorY.linear.stops)
            break
          case 2:
            setLeftOpacity(1)
            restoreColor()
            option.series[1].data[2].itemStyle.normal.color.colorStops = getMulticolor(config.second.dataSeries.two.multicolorY.linear.stops)
            break
        }
        break
      case 2:
        switch (value.dataIndex) {
          case 0:
            setTopOpacity(1)
            restoreColor()
            option.series[2].data[0].itemStyle.normal.color.colorStops = getMulticolor(config.third.dataSeries.one.multicolorY.linear.stops)
            option.series[3].data[0].itemStyle.normal.color.colorStops = getMulticolor(config.third.dataSeries.one.multicolorY.linear.stops)
            console.log(option.series[2].data[0].itemStyle.normal.color.colorStops)
            break
          case 1:
            setRightTopOpacity(1)
            restoreColor()
            option.series[2].data[1].itemStyle.normal.color.colorStops = getMulticolor(config.third.dataSeries.two.multicolorY.linear.stops)
            option.series[3].data[1].itemStyle.normal.color.colorStops = getMulticolor(config.third.dataSeries.two.multicolorY.linear.stops)
            console.log(option.series[2].data[0].itemStyle.normal.color.colorStops)
            break
          case 2:
            setLeftTopOpacity(1)
            restoreColor()
            option.series[2].data[2].itemStyle.normal.color.colorStops = getMulticolor(config.third.dataSeries.three.multicolorY.linear.stops)
            option.series[3].data[2].itemStyle.normal.color.colorStops = getMulticolor(config.third.dataSeries.three.multicolorY.linear.stops)
            break
        }
        break
    }
    option && mychart.setOption(option)
  }

  useEffect(() => {
    console.log(domEcharts)
    localStorage.removeItem("seriesIndex")
    localStorage.removeItem("dataIndex")
    // getEcharts(domEcharts.current)

    restoreColor()

    var mychart = echarts.init(domEcharts.current)
    // option && mychart.setOption(option)
    // mychart.resize()

    //   选中高亮
    if (config.boolean == false) {
      mychart.dispatchAction({
        type: "downplay",
      })
    }

    //   鼠标点击高亮
    mychart.on("click", function (value) {
      mychart.dispatchAction({
        type: "downplay",
      })
      setLeftOpacity(0.7)
      setLeftBottomOpacity(0.7)
      setLeftTopOpacity(0.7)
      setRightOpacity(0.7)
      setRightBottomOpacity(0.7)
      setRightTopOpacity(0.7)
      setTopOpacity(0.7)

      mychart.dispatchAction({
        type: "highlight",
        seriesIndex: value.seriesIndex,
        dataIndex: value.dataIndex,
      })
      switch (value.seriesIndex) {
        case 0:
          switch (value.dataIndex) {
            case 0:
              setRightBottomOpacity(1)
              restoreColor()
              option.series[0].data[0].itemStyle.normal.color.colorStops = getMulticolor(config.first.dataSeries.one.multicolorY.linear.stops)
              break
            case 1:
              setLeftBottomOpacity(1)
              restoreColor()
              option.series[0].data[1].itemStyle.normal.color.colorStops = getMulticolor(config.first.dataSeries.two.multicolorY.linear.stops)
              break
          }
          break
        case 1:
          switch (value.dataIndex) {
            case 0:
              setRightOpacity(1)
              restoreColor()
              option.series[1].data[0].itemStyle.normal.color.colorStops = getMulticolor(config.second.dataSeries.one.multicolorY.linear.stops)
              break
            case 2:
              setLeftOpacity(1)
              restoreColor()
              option.series[1].data[2].itemStyle.normal.color.colorStops = getMulticolor(config.second.dataSeries.two.multicolorY.linear.stops)
              break
          }
          break
        case 2:
          switch (value.dataIndex) {
            case 0:
              setTopOpacity(1)
              restoreColor()
              option.series[2].data[0].itemStyle.normal.color.colorStops = getMulticolor(config.third.dataSeries.one.multicolorY.linear.stops)
              option.series[3].data[0].itemStyle.normal.color.colorStops = getMulticolor(config.third.dataSeries.one.multicolorY.linear.stops)
              console.log(option.series[2].data[0].itemStyle.normal.color.colorStops)
              break
            case 1:
              setRightTopOpacity(1)
              restoreColor()
              option.series[2].data[1].itemStyle.normal.color.colorStops = getMulticolor(config.third.dataSeries.two.multicolorY.linear.stops)
              option.series[3].data[1].itemStyle.normal.color.colorStops = getMulticolor(config.third.dataSeries.two.multicolorY.linear.stops)
              console.log(option.series[2].data[0].itemStyle.normal.color.colorStops)
              break
            case 2:
              setLeftTopOpacity(1)
              restoreColor()
              option.series[2].data[2].itemStyle.normal.color.colorStops = getMulticolor(config.third.dataSeries.three.multicolorY.linear.stops)
              option.series[3].data[2].itemStyle.normal.color.colorStops = getMulticolor(config.third.dataSeries.three.multicolorY.linear.stops)
              break
          }
          break
      }
      localStorage.setItem("seriesIndex", value.seriesIndex)
      localStorage.setItem("dataIndex", value.dataIndex)

      //   } else {
      //     localStorage.removeItem("seriesIndex")
      //     localStorage.removeItem("dataIndex")
      //   }
      //   mychart.off("click")
      option && mychart.setOption(option)
      return
    })

    if (leftBottomOpacity == 1) {
      restoreColor()
      option.series[0].data[1].itemStyle.normal.color.colorStops = getMulticolor(config.first.dataSeries.two.multicolorY.linear.stops)
    } else if (rightBottomOpacity == 1) {
      restoreColor()
      option.series[0].data[0].itemStyle.normal.color.colorStops = getMulticolor(config.first.dataSeries.one.multicolorY.linear.stops)
    } else if (leftOpacity == 1) {
      restoreColor()
      option.series[1].data[2].itemStyle.normal.color.colorStops = getMulticolor(config.second.dataSeries.two.multicolorY.linear.stops)
    } else if (rightOpacity == 1) {
      restoreColor()
      option.series[1].data[0].itemStyle.normal.color.colorStops = getMulticolor(config.second.dataSeries.one.multicolorY.linear.stops)
    } else if (topOpacity == 1) {
      restoreColor()
      option.series[2].data[0].itemStyle.normal.color.colorStops = getMulticolor(config.third.dataSeries.one.multicolorY.linear.stops)
      option.series[3].data[0].itemStyle.normal.color.colorStops = getMulticolor(config.third.dataSeries.one.multicolorY.linear.stops)
    } else if (rightTopOpacity == 1) {
      restoreColor()
      option.series[2].data[1].itemStyle.normal.color.colorStops = getMulticolor(config.third.dataSeries.two.multicolorY.linear.stops)
      option.series[3].data[1].itemStyle.normal.color.colorStops = getMulticolor(config.third.dataSeries.two.multicolorY.linear.stops)
    } else if (leftTopOpacity == 1) {
      restoreColor()
      option.series[2].data[2].itemStyle.normal.color.colorStops = getMulticolor(config.third.dataSeries.three.multicolorY.linear.stops)
      option.series[3].data[2].itemStyle.normal.color.colorStops = getMulticolor(config.third.dataSeries.three.multicolorY.linear.stops)
    }

    option && mychart.setOption(option)
    mychart.resize()
  }, [props])
  // console.log(mychart)

  //   console.log("582", sortType(2, "AB").value)

  //   数据处理
  const sortLevel = sortData => {
    const groupBy = (array, f) => {
      let groups = {}
      array.forEach(o => {
        let group = JSON.stringify(f(o))
        groups[group] = groups[group] || []
        groups[group].push(o)
      })
      return Object.keys(groups).map(group => {
        return groups[group]
      })
    }
    const sorted = groupBy(sortData, item => {
      return item.level // 返回需要分组的对象
    })
    return sorted
  }

  const sortType = (val, type) => {
    let dataType = {}
    for (let i = 0; i < sortLevel(data)[val].length; i++) {
      switch (type) {
        case sortLevel(data)[val][i].type:
          dataType.value = sortLevel(data)[val][i].value
          dataType.count = sortLevel(data)[val][i].count
          dataType.rate = sortLevel(data)[val][i].rate
          break
      }
    }
    return dataType
  }

  // option更改
  const setOption = val => {
    for (let i = 0; i < option.series[val].data.length; i++) {
      switch (option.series[val].data[i].name) {
        case "A":
          option.series[val].data[i].value = sortType(val, "A").value
          break
        case "B":
          option.series[val].data[i].value = sortType(val, "B").value
          break
        case "AB":
          option.series[val].data[i].value = sortType(val, "AB").value
          break
      }
    }
  }
  setOption(0)
  setOption(1)
  setOption(2)
  option.series[3].data = option.series[2].data

  //   控制能否鼠标交互
  option.series[0].silent = !config.boolean
  option.series[1].silent = !config.boolean
  option.series[2].silent = !config.boolean
  if (config.boolean == false) {
    switch (1) {
      case leftOpacity:
        setLeftOpacity(0.7)
        break
      case leftBottomOpacity:
        setLeftBottomOpacity(0.7)
        break
      case leftTopOpacity:
        setLeftTopOpacity(0.7)
        break
      case rightOpacity:
        setRightOpacity(0.7)
        break
      case rightBottomOpacity:
        setRightBottomOpacity(0.7)
        break
      case rightTopOpacity:
        setRightTopOpacity(0.7)
        break
      case topOpacity:
        setTopOpacity(0.7)
        break
    }
  }

  var fun = null
  const echartStyle = {
    all: {
      width: "100%",
      height: "100%",
      //   background: `url("/src/components/circles/assets/background.png") no-repeat center /100% 100%`,
      //   background: `url(${config.image}) no-repeat center /100% 100%`,

      // 线上
      background: `url(https://easyv.assets.dtstack.com/${config.image}) no-repeat center /100% 100%`,
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      position: "relative",
    },
    main: {
      width: "56.67%",
      height: "68.75%",
    },
    top: {
      position: "absolute",
      top: "11.75%",
      //   left: "41%",
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      flexDirection: "column",
      cursor: "pointer",
      data: {
        display: "flex",
        flexDirection: "column",
        alignItems: "flex-start",
      },
      p: {
        margin: "0",
        fontStyle: config.third.dataSeries.one.label.typeLabel.followLabel.textStyle.italic == true ? "italic" : "normal",
        fontWeight: config.third.dataSeries.one.label.typeLabel.followLabel.textStyle.bold == true ? "bold" : "normal",
        color: config.third.dataSeries.one.label.typeLabel.followLabel.textStyle.color,
        fontSize: config.third.dataSeries.one.label.typeLabel.followLabel.textStyle.fontSize,
        fontFamily: config.third.dataSeries.one.label.typeLabel.followLabel.textStyle.fontFamily,
        opacity: topOpacity,
      },
      zb: {
        margin: "0",
        fontStyle: config.third.dataSeries.one.label.typeLabel.followLabel.textStyle.italic == true ? "italic" : "normal",
        fontWeight: config.third.dataSeries.one.label.typeLabel.followLabel.textStyle.bold == true ? "bold" : "normal",
        color: config.third.dataSeries.one.label.typeLabel.followLabel.textStyle.color,
        fontSize: config.third.dataSeries.one.label.typeLabel.followLabel.textStyle.fontSize,
        fontFamily: config.third.dataSeries.one.label.typeLabel.followLabel.textStyle.fontFamily,
        opacity: topOpacity,
        display: sortType(2, "AB").value == 999 ? "none" : "block",
      },
      typeLabel: {
        color: config.third.dataSeries.one.label.typeLabel.color,
        margin: "0",
        fontSize: config.third.dataSeries.one.label.typeLabel.fontSize,
        fontFamily: config.third.dataSeries.one.label.typeLabel.font,
        opacity: topOpacity,
      },
      span: {
        fontStyle: config.third.dataSeries.one.label.typeLabel.followLabel.trueValue.italic == true ? "italic" : "normal",
        fontWeight: config.third.dataSeries.one.label.typeLabel.followLabel.trueValue.bold == true ? "bold" : "normal",
        color: config.third.dataSeries.one.label.typeLabel.followLabel.trueValue.color,
        fontSize: config.third.dataSeries.one.label.typeLabel.followLabel.trueValue.fontSize,
        fontFamily: config.third.dataSeries.one.label.typeLabel.followLabel.trueValue.fontFamily,
      },
      line: {
        width: Math.round((config.third.dataSeries.one.label.long / 61) * 8) + "px",
        height: config.third.dataSeries.one.label.long + "px",
        // background: `url("/src/components/circles/assets/up.png") no-repeat center /100% 100%`,
        // background: `url(${config.third.decorate.top}) no-repeat center /100% 100%`,
        background: `url(https://easyv.assets.dtstack.com/${config.third.decorate.top}) no-repeat center /100% 100%`,
        position: "absolute",
        top: config.third.dataSeries.one.label.top,
        left: config.third.dataSeries.one.label.left,
        transform: `rotate(${config.third.dataSeries.one.label.rotate}deg)`,
      },
    },
    leftTop: {
      position: "absolute",
      top: "21.375%",
      left: "11.58%",
      display: "flex",
      justifyContent: "center",
      alignItems: "flex-start",
      flexDirection: "column",
      cursor: "pointer",
      data: {
        display: "flex",
        flexDirection: "column",
        alignItems: "flex-start",
      },
      p: {
        margin: "0",
        fontStyle: config.third.dataSeries.three.label.typeLabel.followLabel.textStyle.italic == true ? "italic" : "normal",
        fontWeight: config.third.dataSeries.three.label.typeLabel.followLabel.textStyle.bold == true ? "bold" : "normal",
        color: config.third.dataSeries.three.label.typeLabel.followLabel.textStyle.color,
        fontSize: config.third.dataSeries.three.label.typeLabel.followLabel.textStyle.fontSize,
        fontFamily: config.third.dataSeries.three.label.typeLabel.followLabel.textStyle.fontFamily,
        opacity: leftTopOpacity,
      },
      zb: {
        margin: "0",
        fontStyle: config.third.dataSeries.three.label.typeLabel.followLabel.textStyle.italic == true ? "italic" : "normal",
        fontWeight: config.third.dataSeries.three.label.typeLabel.followLabel.textStyle.bold == true ? "bold" : "normal",
        color: config.third.dataSeries.three.label.typeLabel.followLabel.textStyle.color,
        fontSize: config.third.dataSeries.three.label.typeLabel.followLabel.textStyle.fontSize,
        fontFamily: config.third.dataSeries.three.label.typeLabel.followLabel.textStyle.fontFamily,
        opacity: leftTopOpacity,
        display: sortType(2, "A").value == 999 ? "none" : "block",
      },
      typeLabel: {
        color: config.third.dataSeries.three.label.typeLabel.color,
        margin: "0",
        fontSize: config.third.dataSeries.three.label.typeLabel.fontSize,
        fontFamily: config.third.dataSeries.three.label.typeLabel.font,
        opacity: leftTopOpacity,
      },
      span: {
        fontStyle: config.third.dataSeries.three.label.typeLabel.followLabel.trueValue.italic == true ? "italic" : "normal",
        fontWeight: config.third.dataSeries.three.label.typeLabel.followLabel.trueValue.bold == true ? "bold" : "normal",
        color: config.third.dataSeries.three.label.typeLabel.followLabel.trueValue.color,
        fontSize: config.third.dataSeries.three.label.typeLabel.followLabel.trueValue.fontSize,
        fontFamily: config.third.dataSeries.three.label.typeLabel.followLabel.trueValue.fontFamily,
      },
      line: {
        width: config.third.dataSeries.three.label.long + "px",
        height: Math.round((config.third.dataSeries.three.label.long / 208) * 13) + "px",
        // background: `url("/src/components/circles/assets/left-up.png") no-repeat center /100% 100%`,
        // background: `url(${config.second.decorate.right}) no-repeat center /100% 100%`,
        background: `url(https://easyv.assets.dtstack.com/${config.third.decorate.leftTop}) no-repeat center /100% 100%`,
        position: "absolute",
        top: config.third.dataSeries.three.label.top,
        left: config.third.dataSeries.three.label.left,
        transform: `rotate(${config.third.dataSeries.three.label.rotate}deg)`,
        // overflow: "hidden",
        // image: { width: "208px", position: "absolute", top: "-44px", left: "0px" },
      },
    },
    left: {
      position: "absolute",
      top: "45.125%",
      left: "8.92%",
      display: "flex",
      justifyContent: "center",
      alignItems: "flex-start",
      flexDirection: "column",
      cursor: "pointer",
      data: {
        display: "flex",
        flexDirection: "column",
        alignItems: "flex-start",
      },
      p: {
        margin: "0",
        fontStyle: config.second.dataSeries.two.label.typeLabel.followLabel.textStyle.italic == true ? "italic" : "normal",
        fontWeight: config.second.dataSeries.two.label.typeLabel.followLabel.textStyle.bold == true ? "bold" : "normal",
        color: config.second.dataSeries.two.label.typeLabel.followLabel.textStyle.color,
        fontSize: config.second.dataSeries.two.label.typeLabel.followLabel.textStyle.fontSize,
        fontFamily: config.second.dataSeries.two.label.typeLabel.followLabel.textStyle.fontFamily,
        opacity: leftOpacity,
      },
      zb: {
        margin: "0",
        fontStyle: config.second.dataSeries.two.label.typeLabel.followLabel.textStyle.italic == true ? "italic" : "normal",
        fontWeight: config.second.dataSeries.two.label.typeLabel.followLabel.textStyle.bold == true ? "bold" : "normal",
        color: config.second.dataSeries.two.label.typeLabel.followLabel.textStyle.color,
        fontSize: config.second.dataSeries.two.label.typeLabel.followLabel.textStyle.fontSize,
        fontFamily: config.second.dataSeries.two.label.typeLabel.followLabel.textStyle.fontFamily,
        opacity: leftOpacity,
        display: sortType(1, "A").value == 999 ? "none" : "block",
      },
      typeLabel: {
        color: config.second.dataSeries.two.label.typeLabel.color,
        margin: "0",
        fontSize: config.second.dataSeries.two.label.typeLabel.fontSize,
        fontFamily: config.second.dataSeries.two.label.typeLabel.font,
        opacity: leftOpacity,
      },
      span: {
        fontStyle: config.second.dataSeries.two.label.typeLabel.followLabel.trueValue.italic == true ? "italic" : "normal",
        fontWeight: config.second.dataSeries.two.label.typeLabel.followLabel.trueValue.bold == true ? "bold" : "normal",
        color: config.second.dataSeries.two.label.typeLabel.followLabel.trueValue.color,
        fontSize: config.second.dataSeries.two.label.typeLabel.followLabel.trueValue.fontSize,
        fontFamily: config.second.dataSeries.two.label.typeLabel.followLabel.trueValue.fontFamily,
      },
      line: {
        width: config.second.dataSeries.two.label.long + "px",
        height: Math.round((config.second.dataSeries.two.label.long / 217) * 8) + "px",
        // background: `url("/src/components/circles/assets/left.png") no-repeat center /100% 100%`,
        // background: `url(${config.second.decorate.left}) no-repeat center /100% 100%`,
        background: `url(https://easyv.assets.dtstack.com/${config.second.decorate.left}) no-repeat center /100% 100%`,
        position: "absolute",
        top: config.second.dataSeries.two.label.top,
        left: config.second.dataSeries.two.label.left,
        transform: `rotate(${config.second.dataSeries.two.label.rotate}deg)`,
      },
    },
    leftBottom: {
      position: "absolute",
      top: "68%",
      left: "12.83%",
      display: "flex",
      justifyContent: "center",
      alignItems: "flex-start",
      flexDirection: "column",
      cursor: "pointer",
      data: {
        display: "flex",
        flexDirection: "column",
        alignItems: "flex-start",
      },
      p: {
        margin: "0",
        fontStyle: config.first.dataSeries.two.label.typeLabel.followLabel.textStyle.italic == true ? "italic" : "normal",
        fontWeight: config.first.dataSeries.two.label.typeLabel.followLabel.textStyle.bold == true ? "bold" : "normal",
        color: config.first.dataSeries.two.label.typeLabel.followLabel.textStyle.color,
        fontSize: config.first.dataSeries.two.label.typeLabel.followLabel.textStyle.fontSize,
        fontFamily: config.first.dataSeries.two.label.typeLabel.followLabel.textStyle.fontFamily,
        opacity: leftBottomOpacity,
      },
      zb: {
        margin: "0",
        fontStyle: config.first.dataSeries.two.label.typeLabel.followLabel.textStyle.italic == true ? "italic" : "normal",
        fontWeight: config.first.dataSeries.two.label.typeLabel.followLabel.textStyle.bold == true ? "bold" : "normal",
        color: config.first.dataSeries.two.label.typeLabel.followLabel.textStyle.color,
        fontSize: config.first.dataSeries.two.label.typeLabel.followLabel.textStyle.fontSize,
        fontFamily: config.first.dataSeries.two.label.typeLabel.followLabel.textStyle.fontFamily,
        opacity: leftBottomOpacity,
        display: sortType(0, "A").value == 999 ? "none" : "block",
      },
      typeLabel: {
        color: config.first.dataSeries.two.label.typeLabel.color,
        margin: "0",
        fontSize: config.first.dataSeries.two.label.typeLabel.fontSize,
        fontFamily: config.first.dataSeries.two.label.typeLabel.font,
        opacity: leftBottomOpacity,
      },
      span: {
        fontStyle: config.first.dataSeries.two.label.typeLabel.followLabel.trueValue.italic == true ? "italic" : "normal",
        fontWeight: config.first.dataSeries.two.label.typeLabel.followLabel.trueValue.bold == true ? "bold" : "normal",
        color: config.first.dataSeries.two.label.typeLabel.followLabel.trueValue.color,
        fontSize: config.first.dataSeries.two.label.typeLabel.followLabel.trueValue.fontSize,
        fontFamily: config.first.dataSeries.two.label.typeLabel.followLabel.trueValue.fontFamily,
      },
      line: {
        width: config.first.dataSeries.two.label.long + "px",
        height: Math.round((config.first.dataSeries.two.label.long / 358) * 13) + "px",
        position: "absolute",
        top: config.first.dataSeries.two.label.top,
        left: config.first.dataSeries.two.label.left,
        transform: `rotate(${config.first.dataSeries.two.label.rotate}deg)`,
        // background: `url("/src/components/circles/assets/left-down.png") no-repeat center /100% 100%`,
        // background: `url(${config.second.decorate.right}) no-repeat center /100% 100%`,
        background: `url(https://easyv.assets.dtstack.com/${config.first.decorate.leftBottom}) no-repeat center /100% 100%`,
        // overflow: "hidden",
        // image: {
        //   width: "358px",
        //   position: "absolute",
        //   top: "-87px",
        //   left: "0px",
        // },
      },
    },
    rightTop: {
      position: "absolute",
      top: "21.375%",
      left: "79.1%",
      display: "flex",
      justifyContent: "center",
      alignItems: "flex-start",
      flexDirection: "column",
      cursor: "pointer",
      data: {
        display: "flex",
        flexDirection: "column",
        alignItems: "flex-start",
      },
      p: {
        margin: "0",
        fontStyle: config.third.dataSeries.two.label.typeLabel.followLabel.textStyle.italic == true ? "italic" : "normal",
        fontWeight: config.third.dataSeries.two.label.typeLabel.followLabel.textStyle.bold == true ? "bold" : "normal",
        color: config.third.dataSeries.two.label.typeLabel.followLabel.textStyle.color,
        fontSize: config.third.dataSeries.two.label.typeLabel.followLabel.textStyle.fontSize,
        fontFamily: config.third.dataSeries.two.label.typeLabel.followLabel.textStyle.fontFamily,
        opacity: rightTopOpacity,
      },
      zb: {
        margin: "0",
        fontStyle: config.third.dataSeries.two.label.typeLabel.followLabel.textStyle.italic == true ? "italic" : "normal",
        fontWeight: config.third.dataSeries.two.label.typeLabel.followLabel.textStyle.bold == true ? "bold" : "normal",
        color: config.third.dataSeries.two.label.typeLabel.followLabel.textStyle.color,
        fontSize: config.third.dataSeries.two.label.typeLabel.followLabel.textStyle.fontSize,
        fontFamily: config.third.dataSeries.two.label.typeLabel.followLabel.textStyle.fontFamily,
        opacity: rightTopOpacity,
        display: sortType(2, "B").value == 999 ? "none" : "block",
      },
      typeLabel: {
        color: config.third.dataSeries.two.label.typeLabel.color,
        margin: "0",
        fontSize: config.third.dataSeries.two.label.typeLabel.fontSize,
        fontFamily: config.third.dataSeries.two.label.typeLabel.font,
        opacity: rightTopOpacity,
      },
      span: {
        fontStyle: config.third.dataSeries.two.label.typeLabel.followLabel.trueValue.italic == true ? "italic" : "normal",
        fontWeight: config.third.dataSeries.two.label.typeLabel.followLabel.trueValue.bold == true ? "bold" : "normal",
        color: config.third.dataSeries.two.label.typeLabel.followLabel.trueValue.color,
        fontSize: config.third.dataSeries.two.label.typeLabel.followLabel.trueValue.fontSize,
        fontFamily: config.third.dataSeries.two.label.typeLabel.followLabel.trueValue.fontFamily,
      },
      line: {
        width: config.third.dataSeries.two.label.long + "px",
        height: Math.round((config.third.dataSeries.two.label.long / 218) * 13) + "px",
        position: "absolute",
        top: config.third.dataSeries.two.label.top,
        left: config.third.dataSeries.two.label.left,
        transform: `rotate(${config.third.dataSeries.two.label.rotate}deg)`,
        // background: `url("/src/components/circles/assets/right-up.png") no-repeat center /100% 100%`,
        // background: `url(${config.second.decorate.right}) no-repeat center /100% 100%`,
        background: `url(https://easyv.assets.dtstack.com/${config.third.decorate.rightTop}) no-repeat center /100% 100%`,
        // overflow: "hidden",
        // image: { width: "218px", position: "absolute", top: "-48px", left: "0px" },
      },
    },
    right: {
      position: "absolute",
      top: "45.125%",
      left: "83.25%",
      display: "flex",
      justifyContent: "center",
      alignItems: "flex-start",
      flexDirection: "column",
      cursor: "pointer",
      data: {
        display: "flex",
        flexDirection: "column",
        alignItems: "flex-start",
      },
      p: {
        margin: "0",
        fontStyle: config.second.dataSeries.one.label.typeLabel.followLabel.textStyle.italic == true ? "italic" : "normal",
        fontWeight: config.second.dataSeries.one.label.typeLabel.followLabel.textStyle.bold == true ? "bold" : "normal",
        color: config.second.dataSeries.one.label.typeLabel.followLabel.textStyle.color,
        fontSize: config.second.dataSeries.one.label.typeLabel.followLabel.textStyle.fontSize,
        fontFamily: config.second.dataSeries.one.label.typeLabel.followLabel.textStyle.fontFamily,
        opacity: rightOpacity,
      },
      zb: {
        margin: "0",
        fontStyle: config.second.dataSeries.one.label.typeLabel.followLabel.textStyle.italic == true ? "italic" : "normal",
        fontWeight: config.second.dataSeries.one.label.typeLabel.followLabel.textStyle.bold == true ? "bold" : "normal",
        color: config.second.dataSeries.one.label.typeLabel.followLabel.textStyle.color,
        fontSize: config.second.dataSeries.one.label.typeLabel.followLabel.textStyle.fontSize,
        fontFamily: config.second.dataSeries.one.label.typeLabel.followLabel.textStyle.fontFamily,
        opacity: rightOpacity,
        display: sortType(1, "B").value == 999 ? "none" : "block",
      },
      typeLabel: {
        color: config.second.dataSeries.one.label.typeLabel.color,
        margin: "0",
        fontSize: config.second.dataSeries.one.label.typeLabel.fontSize,
        fontFamily: config.second.dataSeries.one.label.typeLabel.font,
        opacity: rightOpacity,
      },
      span: {
        fontStyle: config.second.dataSeries.one.label.typeLabel.followLabel.trueValue.italic == true ? "italic" : "normal",
        fontWeight: config.second.dataSeries.one.label.typeLabel.followLabel.trueValue.bold == true ? "bold" : "normal",
        color: config.second.dataSeries.one.label.typeLabel.followLabel.trueValue.color,
        fontSize: config.second.dataSeries.one.label.typeLabel.followLabel.trueValue.fontSize,
        fontFamily: config.second.dataSeries.one.label.typeLabel.followLabel.trueValue.fontFamily,
      },
      line: {
        width: config.second.dataSeries.one.label.long + "px",
        height: Math.round((config.second.dataSeries.one.label.long / 217) * 8) + "px",
        // background: "url(/src/components/circles/assets/right.png) center center / 100% 100% no-repeat",
        // background: `url(${config.second.decorate.right}) no-repeat center /100% 100%`,
        background: `url(https://easyv.assets.dtstack.com/${config.second.decorate.right}) no-repeat center /100% 100%`,
        position: "absolute",
        top: config.second.dataSeries.one.label.top,
        left: config.second.dataSeries.one.label.left,
        transform: `rotate(${config.second.dataSeries.one.label.rotate}deg)`,
      },
    },
    rightBottom: {
      position: "absolute",
      top: "68%",
      left: "78.75%",
      display: "flex",
      justifyContent: "center",
      alignItems: "flex-start",
      flexDirection: "column",
      cursor: "pointer",
      data: {
        display: "flex",
        flexDirection: "column",
        alignItems: "flex-start",
      },
      p: {
        margin: "0",
        fontStyle: config.first.dataSeries.one.label.typeLabel.followLabel.textStyle.italic == true ? "italic" : "normal",
        fontWeight: config.first.dataSeries.one.label.typeLabel.followLabel.textStyle.bold == true ? "bold" : "normal",
        color: config.first.dataSeries.one.label.typeLabel.followLabel.textStyle.color,
        fontSize: config.first.dataSeries.one.label.typeLabel.followLabel.textStyle.fontSize,
        fontFamily: config.first.dataSeries.one.label.typeLabel.followLabel.textStyle.fontFamily,
        opacity: rightBottomOpacity,
      },
      zb: {
        margin: "0",
        fontStyle: config.first.dataSeries.one.label.typeLabel.followLabel.textStyle.italic == true ? "italic" : "normal",
        fontWeight: config.first.dataSeries.one.label.typeLabel.followLabel.textStyle.bold == true ? "bold" : "normal",
        color: config.first.dataSeries.one.label.typeLabel.followLabel.textStyle.color,
        fontSize: config.first.dataSeries.one.label.typeLabel.followLabel.textStyle.fontSize,
        fontFamily: config.first.dataSeries.one.label.typeLabel.followLabel.textStyle.fontFamily,
        opacity: rightBottomOpacity,
        display: sortType(0, "B").value == 999 ? "none" : "block",
      },
      typeLabel: {
        color: config.first.dataSeries.one.label.typeLabel.color,
        margin: "0",
        fontSize: config.first.dataSeries.one.label.typeLabel.fontSize,
        fontFamily: config.first.dataSeries.one.label.typeLabel.font,
        opacity: rightBottomOpacity,
      },
      span: {
        fontStyle: config.first.dataSeries.one.label.typeLabel.followLabel.trueValue.italic == true ? "italic" : "normal",
        fontWeight: config.first.dataSeries.one.label.typeLabel.followLabel.trueValue.bold == true ? "bold" : "normal",
        color: config.first.dataSeries.one.label.typeLabel.followLabel.trueValue.color,
        fontSize: config.first.dataSeries.one.label.typeLabel.followLabel.trueValue.fontSize,
        fontFamily: config.first.dataSeries.one.label.typeLabel.followLabel.trueValue.fontFamily,
      },
      line: {
        width: config.first.dataSeries.one.label.long + "px",
        height: Math.round((config.first.dataSeries.one.label.long / 358) * 13) + "px",
        // background: `url("/src/components/circles/assets/right-down.png") no-repeat center /100% 100%`,
        // background: `url(${config.second.decorate.right}) no-repeat center /100% 100%`,
        background: `url(https://easyv.assets.dtstack.com/${config.first.decorate.rightBottom}) no-repeat center /100% 100%`,
        position: "absolute",
        top: config.first.dataSeries.one.label.top,
        left: config.first.dataSeries.one.label.left,
        transform: `rotate(${config.first.dataSeries.one.label.rotate}deg)`,
        // overflow: "hidden",
        // image: { width: "358px", position: "absolute", top: "-86px", left: "0px" },
      },
    },
  }

  return (
    <div className="__easyv-component" style={styles}>
      <div id="all" style={echartStyle.all}>
        <div
          id="main"
          style={echartStyle.main}
          ref={domEcharts}
          //   ref={el => {
          //     fun = el
          //     getEcharts("main")
          //   }}
        ></div>
        <div
          className="top"
          style={echartStyle.top}
          onClick={e => {
            handleClick(e, { seriesIndex: 2, dataIndex: 0 })
          }}
        >
          <p style={echartStyle.top.typeLabel}>同时拥有A类，B类执法资格人数</p>
          <div style={echartStyle.top.data}>
            <p style={echartStyle.top.p}>
              数量：<span style={echartStyle.top.span}>{sortType(2, "AB").count}</span>
            </p>
            <p style={echartStyle.top.zb}>
              占比：<span style={echartStyle.top.span}>{sortType(2, "AB").value}%</span>
            </p>
          </div>
          <div className="line" style={echartStyle.top.line}></div>
        </div>
        <div
          className="leftTop"
          style={echartStyle.leftTop}
          onClick={e => {
            handleClick(e, { seriesIndex: 2, dataIndex: 2 })
          }}
        >
          <p style={echartStyle.leftTop.typeLabel}>A类执法资格人数</p>
          <div style={echartStyle.leftTop.data}>
            <p style={echartStyle.leftTop.p}>
              数量：<span style={echartStyle.leftTop.span}>{sortType(2, "A").count}</span>
            </p>
            <p style={echartStyle.leftTop.zb}>
              占比：<span style={echartStyle.leftTop.span}>{sortType(2, "A").value}%</span>
            </p>
          </div>
          <div className="line" style={echartStyle.leftTop.line}></div>
        </div>
        <div
          className="left"
          style={echartStyle.left}
          onClick={e => {
            handleClick(e, { seriesIndex: 1, dataIndex: 2 })
          }}
        >
          <p style={echartStyle.left.typeLabel}>A类核定人员</p>
          <div style={echartStyle.left.data}>
            <p style={echartStyle.left.p}>
              数量：<span style={echartStyle.left.span}>{sortType(1, "A").count}</span>
            </p>
            <p style={echartStyle.left.zb}>
              占比：<span style={echartStyle.left.span}>{sortType(1, "A").value}%</span>
            </p>
          </div>
          <div className="line" style={echartStyle.left.line}></div>
        </div>
        <div
          className="leftBottom"
          style={echartStyle.leftBottom}
          onClick={e => {
            handleClick(e, { seriesIndex: 0, dataIndex: 1 })
          }}
        >
          <p style={echartStyle.leftBottom.typeLabel}>A类在岗人员数</p>
          <div style={echartStyle.leftBottom.data}>
            <p style={echartStyle.leftBottom.p}>
              数量：<span style={echartStyle.leftBottom.span}>{sortType(0, "A").count}</span>
            </p>
            <p style={echartStyle.leftBottom.zb}>
              占比：<span style={echartStyle.leftBottom.span}>{sortType(0, "A").value}%</span>
            </p>
            <p style={echartStyle.leftBottom.p}>
              在岗率：<span style={echartStyle.leftBottom.span}>{sortType(0, "A").rate}</span>
            </p>
          </div>
          <div className="line" style={echartStyle.leftBottom.line}></div>
        </div>
        <div
          className="rightTop"
          style={echartStyle.rightTop}
          onClick={e => {
            handleClick(e, { seriesIndex: 2, dataIndex: 1 })
          }}
        >
          <p style={echartStyle.rightTop.typeLabel}>B类执法资格人数</p>
          <div style={echartStyle.rightTop.data}>
            <p style={echartStyle.rightTop.p}>
              数量：<span style={echartStyle.rightTop.span}>{sortType(2, "B").count}</span>
            </p>
            <p style={echartStyle.rightTop.zb}>
              占比：<span style={echartStyle.rightTop.span}>{sortType(2, "B").value}%</span>
            </p>
          </div>
          <div className="line" style={echartStyle.rightTop.line}></div>
        </div>
        <div
          className="right"
          style={echartStyle.right}
          onClick={e => {
            handleClick(e, { seriesIndex: 1, dataIndex: 0 })
          }}
        >
          <p style={echartStyle.right.typeLabel}>B类核定人员</p>
          <div style={echartStyle.right.data}>
            <p style={echartStyle.right.p}>
              数量：<span style={echartStyle.right.span}>{sortType(1, "B").count}</span>
            </p>
            <p style={echartStyle.right.zb}>
              占比：<span style={echartStyle.right.span}>{sortType(1, "B").value}%</span>
            </p>
          </div>
          <div className="line" style={echartStyle.right.line}></div>
        </div>
        <div
          className="rightBottom"
          style={echartStyle.rightBottom}
          onClick={e => {
            handleClick(e, { seriesIndex: 0, dataIndex: 0 })
          }}
        >
          <p style={echartStyle.rightBottom.typeLabel}>B类在岗人员数</p>
          <div style={echartStyle.rightBottom.data}>
            <p style={echartStyle.rightBottom.p}>
              数量：<span style={echartStyle.rightBottom.span}>{sortType(0, "B").count}</span>
            </p>
            <p style={echartStyle.rightBottom.zb}>
              占比：<span style={echartStyle.rightBottom.span}>{sortType(0, "B").value}%</span>
            </p>
            <p style={echartStyle.rightBottom.p}>
              在岗率：<span style={echartStyle.rightBottom.span}>{sortType(0, "B").rate}</span>
            </p>
          </div>
          <div className="line" style={echartStyle.rightBottom.line}></div>
        </div>
      </div>
    </div>
  )
}
